<template>
    <div class="list-wrap">
        <div class="title">
            <p class="index">{{indexText}}</p>
            <div class="other">
                <p :class="indexText === '推荐' ?  'active' : '' "  @click="sendTuiJianRequest()">推荐</p>
                <p :class="indexText === '最新' ?  'active' : '' " @click="sendZuiXinnRequest()">最新</p>
                <p :class="indexText === '精选' ?  'active' : '' " @click="sendJingXuanRequest()">精选</p>
            </div>
        </div>

        <div class="list">
            <HomeItem
                v-for="(item) in HomeList" :key="item._id"
                :item = "item"
                :userCommentList = "userCommentList"
                :userCollectList = "userCollectList"
            />
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import HomeItem from '@/components/HomeItem'
    export default {
        name:"Home-List",
        components:{HomeItem},
        data(){
            return {
                indexText:sessionStorage.getItem('indexText') || '推荐'
            }
        },
        computed:{
            ...mapState('Home',['HomeList','userCommentList','userCollectList'])
        },
        watch:{
            indexText(val){
                sessionStorage.setItem('indexText',val)
            }
        },
        methods: {
            // 发送页面数据的最新请求
            sendTuiJianRequest(){
                this.indexText = '推荐'
                this.$store.dispatch('Home/getHomeDate','推荐')
            },
            sendZuiXinnRequest(){
                this.indexText = '最新'
                this.$store.dispatch('Home/getHomeDate','最新')
            },
            sendJingXuanRequest(){
                 this.indexText = '精选'
                 this.$store.dispatch('Home/getHomeDate','精选')
            },
        },
        created() {
             // 获取用户收藏数组中的数据
            const user = sessionStorage.getItem('user')
            if(user){
                this.$store.dispatch('Home/getUserCommentData','点赞')
                this.$store.dispatch('Home/getUserCollectOrCommitData','收藏')
            }
        },
    }
</script>

<style scoped lang="less">
    .list-wrap{
        width: 80%;
        margin: 0 auto;
        padding: 2vw 0;

        .title{
            width: 100%;
            height: 4vw;
            background: #fff;
            display: flex;
            justify-content: space-between;

            .index{
                color: #333;
                font-weight: 1000;
                line-height: 4vw;
                font-size: 2vw;
                margin-left: 1.3vw;
            }

            .other{
                display: flex;
                height: 100%;
                align-items: center;
                margin-right: 1.3vw;
                .active{
                        border: 1px solid rgb(51, 173, 221);
                        color: rgb(19, 141, 223);
                }

                p{
                    width: 4vw;
                    height: 2vw;
                    line-height: 2vw;
                    border: 1px solid #ccc;
                    font-size: 1.2vw;
                    text-align: center;
                    cursor: pointer;

                    
                }

    
            }
        }

        .list{
            display: flex;
            margin-top: 2vw;
            width: 100%;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-between;
        }

        
        
    }
</style>